React useMemo: 메모이제이션으로 성능 최적화하기

React 개발 세계에서 성능은 가장 중요합니다. 애플리케이션의 복잡성이 증가함에 따라 부드럽고 반응성이 좋은 사용자 경험을 보장하는 것이 점점 더 중요해지고 있습니다. React의 성능 최적화를 위한 강력한 도구 중 하나는 useMemo 훅입니다. 이 훅을 사용하면 비용이 많이 드는 계산 결과를 메모아이즈(memoize)하거나 캐시(cache)하여 불필요한 재계산을 방지하고 애플리케이션의 효율성을 향상시킬 수 있습니다.

메모이제이션(Memoization) 이해하기

핵심적으로 메모이제이션은 비용이 많이 드는 함수 호출 결과를 저장하고 동일한 입력이 다시 발생했을 때 캐시된 결과를 반환하여 함수를 최적화하는 기법입니다. 함수는 계산을 반복적으로 수행하는 대신 이전에 계산된 값을 간단히 검색합니다. 이는 특히 복잡한 계산이나 대규모 데이터셋을 다룰 때 함수 실행에 필요한 시간과 리소스를 크게 줄일 수 있습니다.

숫자의 팩토리얼을 계산하는 함수가 있다고 상상해 보세요. 큰 수의 팩토리얼을 계산하는 것은 계산 집약적일 수 있습니다. 메모이제이션은 이미 계산된 각 숫자의 팩토리얼을 저장함으로써 도움을 줄 수 있습니다. 다음에 같은 숫자로 함수가 호출되면, 다시 계산하는 대신 저장된 결과를 간단히 검색할 수 있습니다.

React useMemo 소개

React의 useMemo 훅은 함수형 컴포넌트 내에서 값을 메모아이즈하는 방법을 제공합니다. 이 훅은 두 개의 인자를 받습니다:

• 계산을 수행하는 함수.
• 의존성 배열.

useMemo 훅은 의존성 배열의 의존성 중 하나가 변경될 때만 함수를 다시 실행합니다. 의존성이 동일하게 유지되면 이전 렌더링에서 캐시된 값을 반환합니다. 이는 함수가 불필요하게 실행되는 것을 방지하여 특히 비용이 많이 드는 계산을 처리할 때 성능을 크게 향상시킬 수 있습니다.

useMemo의 구문

useMemo의 구문은 간단합니다:

const memoizedValue = useMemo(() => {
  // 여기에 비용이 많이 드는 계산
  return computeExpensiveValue(a, b);
}, [a, b]);

이 예제에서 computeExpensiveValue(a, b)는 비용이 많이 드는 계산을 수행하는 함수입니다. 배열 [a, b]는 의존성을 지정합니다. useMemo 훅은 a 또는 b가 변경될 경우에만 computeExpensiveValue 함수를 다시 실행합니다. 그렇지 않으면 이전 렌더링에서 캐시된 값을 반환합니다.

useMemo는 언제 사용해야 할까요?

useMemo는 다음과 같은 시나리오에서 가장 유용합니다:

• 비용이 많이 드는 계산: 복잡한 데이터 변환이나 대규모 데이터셋 필터링과 같이 계산 집약적인 작업을 수행하는 함수가 있을 때.
• 참조 동등성 검사: 특히 React.memo를 사용하는 자식 컴포넌트에 값을 props로 전달할 때, 기본 의존성이 변경될 때만 값이 변경되도록 보장해야 할 때.
• 불필요한 리렌더링 방지: props나 상태가 실제로 변경되지 않는 한 컴포넌트가 리렌더링되는 것을 방지하고 싶을 때.

이러한 각 시나리오를 실제 예제와 함께 자세히 살펴보겠습니다.

시나리오 1: 비용이 많이 드는 계산

특정 기준에 따라 대규모 사용자 데이터 배열을 필터링해야 하는 시나리오를 생각해 보세요. 대규모 배열을 필터링하는 것은 특히 필터링 로직이 복잡한 경우 계산 비용이 많이들 수 있습니다.

const UserList = ({ users, filter }) => {
  const filteredUsers = useMemo(() => {
    console.log('사용자 필터링 중...'); // 비용이 많이 드는 계산 시뮬레이션
    return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
  }, [users, filter]);

  return (
    

      {filteredUsers.map(user => (
        
{user.name}
      ))}
    
  );
};

이 예제에서 filteredUsers 변수는 useMemo를 사용하여 메모아이즈됩니다. 필터링 로직은 users 배열이나 filter 값이 변경될 때만 다시 실행됩니다. 만약 users 배열과 filter 값이 동일하게 유지되면, useMemo 훅은 캐시된 filteredUsers 배열을 반환하여 필터링 로직이 불필요하게 다시 실행되는 것을 방지합니다.

시나리오 2: 참조 동등성 검사

React.memo를 사용하는 자식 컴포넌트에 값을 props로 전달할 때, props가 그들의 기본 의존성이 변경될 때만 변경되도록 보장하는 것이 중요합니다. 그렇지 않으면, 표시하는 데이터가 변경되지 않았음에도 불구하고 자식 컴포넌트가 불필요하게 리렌더링될 수 있습니다.

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent 리렌더링됨!');
  return 
{data.value}
;
});

const ParentComponent = () => {
  const [a, setA] = React.useState(1);
  const [b, setB] = React.useState(2);

  const data = useMemo(() => ({
    value: a + b,
  }), [a, b]);

  return (
    

      
       setA(a + 1)}>A 증가
       setB(b + 1)}>B 증가
    
  );
};

이 예제에서 data 객체는 useMemo를 사용하여 메모아이즈됩니다. React.memo로 감싸진 MyComponent 컴포넌트는 data prop이 변경될 때만 리렌더링됩니다. data가 메모아이즈되었기 때문에, a 또는 b가 변경될 때만 변경됩니다. useMemo가 없다면 ParentComponent가 렌더링될 때마다 새로운 data 객체가 생성되어, a + b의 value가 동일하게 유지되더라도 MyComponent가 불필요하게 리렌더링될 것입니다.

시나리오 3: 불필요한 리렌더링 방지

때로는 props나 상태가 실제로 변경되지 않는 한 컴포넌트가 리렌더링되는 것을 방지하고 싶을 수 있습니다. 이는 많은 자식 컴포넌트를 가진 복잡한 컴포넌트의 성능을 최적화하는 데 특히 유용할 수 있습니다.

const MyComponent = ({ config }) => {
  const processedConfig = useMemo(() => {
    // config 객체 처리 (비용이 많이 드는 작업)
    console.log('config 처리 중...');
    let result = {...config}; // 간단한 예제이지만 복잡할 수 있음
    if (result.theme === 'dark') {
        result.textColor = 'white';
    } else {
        result.textColor = 'black';
    }
    return result;
  }, [config]);

  return (
    

      
{processedConfig.title}
      
{processedConfig.description}
    
  );
};

const App = () => {
  const [theme, setTheme] = React.useState('light');
  const config = useMemo(() => ({
      title: '내 앱',
      description: '이것은 샘플 앱입니다.',
      theme: theme
  }), [theme]);

  return (
    

      
       setTheme(theme === 'light' ? 'dark' : 'light')}>테마 전환
    
  );
};

이 예제에서 processedConfig 객체는 config prop을 기반으로 메모아이즈됩니다. 비용이 많이 드는 config 처리 로직은 config 객체 자체가 변경될 때(즉, 테마가 변경될 때)만 실행됩니다. 결정적으로, `App` 컴포넌트가 리렌더링될 때마다 `App` 컴포넌트에서 `config` 객체가 재정의되더라도, `useMemo`를 사용하면 `config` 객체는 `theme` 변수 자체가 변경될 때만 실제로 *변경*됩니다. `App` 컴포넌트에서 `useMemo` 훅이 없다면 `App`이 렌더링될 때마다 새로운 `config` 객체가 생성되어, 기본 데이터(테마)가 실제로 동일하더라도 `MyComponent`가 매번 `processedConfig`를 다시 계산하게 될 것입니다.

피해야 할 일반적인 실수

useMemo는 강력한 도구이지만, 신중하게 사용하는 것이 중요합니다. useMemo를 과도하게 사용하면 메모아이즈된 값을 관리하는 오버헤드가 재계산을 피하는 이점보다 커져 오히려 성능을 저하시킬 수 있습니다.

• 과도한 메모이제이션: 모든 것을 메모아이즈하지 마세요! 계산 비용이 정말 많이 들거나 참조 동등성 검사에 사용되는 값만 메모아이즈하세요.
• 부정확한 의존성: 함수가 의존하는 모든 의존성을 의존성 배열에 포함시켜야 합니다. 그렇지 않으면 메모아이즈된 값이 오래된 값이 되어 예기치 않은 동작을 유발할 수 있습니다.
• 의존성 누락: 의존성을 잊어버리면 추적하기 어려운 미묘한 버그가 발생할 수 있습니다. 의존성 배열이 완전한지 항상 다시 확인하세요.
• 성급한 최적화: 성급하게 최적화하지 마세요. 성능 병목 현상을 확인했을 때만 최적화하세요. 프로파일링 도구를 사용하여 코드의 어느 부분이 실제로 성능 문제를 일으키는지 파악하세요.

useMemo의 대안

useMemo가 값을 메모아이즈하는 강력한 도구이긴 하지만, React 애플리케이션의 성능을 최적화하는 데 사용할 수 있는 다른 기법들도 있습니다.

• React.memo: React.memo는 함수형 컴포넌트를 메모아이즈하는 고차 컴포넌트(HOC)입니다. props가 변경되지 않는 한 컴포넌트가 리렌더링되는 것을 방지합니다. 이는 동일한 props를 반복적으로 받는 컴포넌트의 성능을 최적화하는 데 유용합니다.
• PureComponent (클래스 컴포넌트용): React.memo와 유사하게, PureComponent는 props와 state의 얕은 비교를 수행하여 컴포넌트가 리렌더링되어야 하는지 결정합니다.
• 코드 분할(Code Splitting): 코드 분할을 사용하면 애플리케이션을 더 작은 번들로 나누어 필요할 때 로드할 수 있습니다. 이는 애플리케이션의 초기 로딩 시간을 개선하고 파싱 및 실행해야 하는 코드의 양을 줄일 수 있습니다.
• 디바운싱(Debouncing) 및 스로틀링(Throttling): 디바운싱과 스로틀링은 함수가 실행되는 비율을 제한하는 데 사용되는 기법입니다. 이는 스크롤 핸들러나 리사이즈 핸들러와 같이 자주 트리거되는 이벤트 핸들러의 성능을 최적화하는 데 유용할 수 있습니다.

전 세계의 실제 적용 사례

useMemo가 전 세계의 다양한 맥락에서 어떻게 적용될 수 있는지 몇 가지 예를 살펴보겠습니다:

• 전자상거래 (글로벌): 글로벌 전자상거래 플랫폼은 복잡한 상품 필터링 및 정렬 작업의 결과를 캐시하기 위해 useMemo를 사용하여 위치나 인터넷 연결 속도에 관계없이 전 세계 사용자에게 빠르고 반응성이 좋은 쇼핑 경험을 보장할 수 있습니다. 예를 들어, 도쿄의 사용자가 가격대와 재고 여부로 상품을 필터링할 때 메모아이즈된 필터링 함수의 이점을 누릴 수 있습니다.
• 금융 대시보드 (국제): 실시간 주가 및 시장 데이터를 표시하는 금융 대시보드는 이동 평균이나 변동성 측정과 같은 금융 지표 관련 계산 결과를 캐시하기 위해 useMemo를 사용할 수 있습니다. 이는 대량의 데이터를 표시할 때 대시보드가 느려지는 것을 방지합니다. 런던의 트레이더가 주식 성과를 모니터링할 때 더 부드러운 업데이트를 볼 수 있습니다.
• 지도 애플리케이션 (지역): 지리 데이터를 표시하는 지도 애플리케이션은 지도 투영 및 좌표 변환과 관련된 계산 결과를 캐시하기 위해 useMemo를 사용할 수 있습니다. 이는 특히 대규모 데이터셋이나 복잡한 지도 스타일을 다룰 때 지도를 확대/축소하고 이동할 때 애플리케이션의 성능을 향상시킵니다. 아마존 열대우림의 상세 지도를 탐색하는 사용자는 더 빠른 렌더링을 경험할 수 있습니다.
• 언어 번역 앱 (다국어): 대량의 번역된 텍스트를 처리하고 표시해야 하는 언어 번역 앱을 상상해 보세요. useMemo를 사용하여 텍스트 서식 및 렌더링을 메모아이즈하여 표시되는 언어에 관계없이 부드러운 사용자 경험을 보장할 수 있습니다. 이는 중국어나 아랍어와 같이 복잡한 문자 체계를 가진 언어에 특히 중요합니다.

결론

useMemo 훅은 React 애플리케이션의 성능을 최적화하는 데 유용한 도구입니다. 비용이 많이 드는 계산을 메모아이즈하고 불필요한 리렌더링을 방지함으로써 코드의 속도와 효율성을 크게 향상시킬 수 있습니다. 그러나 useMemo를 신중하게 사용하고 그 한계를 이해하는 것이 중요합니다. useMemo를 과도하게 사용하면 실제로는 성능이 저하될 수 있으므로, 코드에서 실제로 성능 문제를 일으키는 부분을 파악하고 해당 영역에 최적화 노력을 집중하는 것이 중요합니다.

메모이제이션의 원리와 useMemo 훅을 효과적으로 사용하는 방법을 이해함으로써, 전 세계 사용자에게 부드럽고 반응성이 좋은 사용자 경험을 제공하는 고성능 React 애플리케이션을 구축할 수 있습니다. 코드를 프로파일링하고, 병목 현상을 식별하며, 최상의 결과를 얻기 위해 전략적으로 useMemo를 적용하는 것을 잊지 마세요.